<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/fonts/iconfonts.css">
<body>
    <!-- 头部 -->
    <header>
        <div class="header_top">
           <ul>
               <li>传智播客旗下高端在线教育品牌</li>
               <li></li>
               <li>线下学院</li>
           </ul>
        </div>
        <div class="header_content">
            <div class="content_left">
                <img src="../images/logo.png" alt="">
            </div>
            <div class="content_right">
               <ul>
                   <li>学习中心</li>
                   <li>购物车</li>
                   <li></li>
                   <li>登录</li>
                   <li>注册</li>
               </ul> 
            </div>
        </div>
    </header>
    <!-- 导航部分 -->
    <nav class="nav w">
        <div class="nav_left">
            <h3>全部学科</h3>
            <ul>
                <li><a href="#">Java</a></li>
                <li><a href="#">前端</a></li>
                <li><a href="#">大数据</a></li>
                <li><a href="#">Android</a></li>
                <li><a href="#">C/C++</a></li>
                <li><a href="#">iOS</a></li>
                <li><a href="#">UI</a></li>
                <li><a href="#">网络营销</a></li>
                <li><a href="#">Python</a></li>
            </ul>
        </div>
        <div class="nav_right">
            <ul>
                <li>首页</li>
                <li>就业班</li>
                <li>职业路线</li>
                <li>微课</li>
                <li>学习社区</li>
                <li>问答精灵</li>
                <li>论坛</li>
                <li>
                    <input type="text" placeholder="搜索关键字">
                    <i></i>
                    <img src="../images/search.png" alt="">
                </li>
            </ul>
        </div>
    </nav>
    
   <!-- 主要内容 -->
    <div class="content">
        <div class="focus">
            <div class="w">
                <img src="../images/web.jpg" alt="">
            </div>
        </div>
        <section class="w">
            <div class="onsale">
                <ul>
                    <li>
                       <img class="sale" src="../images/infos.png" alt="">
                       <div class="saleText">
                           <p>200元券</p>
                           <p>关注微信可获得200元</p>
                       </div>
                    </li>
                    <li>
                        <img class="sale" src="../images/infos.png" alt="">
                        <div class="saleText">
                            <p>200元券</p>
                            <p>关注微信可获得200元</p>
                        </div>
                    </li>
                    <li>
                        <img class="sale" src="../images/infos.png" alt="">
                        <div class="saleText">
                            <p>200元券</p>
                            <p>关注微信可获得200元</p>
                        </div>
                    </li>
                    <li>
                        <img class="sale" src="../images/infos.png" alt="">
                        <div class="saleText">
                            <p>200元券</p>
                            <p>关注微信可获得200元</p>
                        </div>
                    </li>
                </ul>
            </div>
        </section>
    
        <!-- 新闻模块 -->
        <div class=" w news_box">
            <div class="hot_news">
                <h3>热门公开课</h3>
                <ul>
                    <li>
                        <img  src="../images/pub.png" alt="">
                        <div class="class_content">
                            <div class="content1">
                                <span>javascript</span>
                                <span>讲师：xxx</span>
                            </div>
                            <div class="content2">
                                <span>开始时间11/11 20:30</span>
                                <img src="../images/pub01.png" alt=""><span>直播未开始</span>
                            </div>
                        </div>
                    </li>
                    <li>
                        <img  src="../images/pub.png" alt="">
                        <div class="class_content">
                            <div class="content1">
                                <span>javascript</span>
                                <span>讲师：xxx</span>
                            </div>
                            <div class="content2">
                                <span>开始时间11/11 20:30</span>
                                <img src="../images/pub01.png" alt=""><span>直播未开始</span>
                            </div>
                        </div>
                    </li>
                </ul>
                <img src="../images/right.png" alt="">
            </div>
            <div class="news">
                <div class="news_title">
                    <h3>博学谷新闻</h3>
                    <img src="../images/news.png" alt="">
                </div>
                <div class="news_content">
                    <a href="#">资讯公告</a>
                    <ul>
                        <li>云计算在线班，挑战年薪30W</li>
                        <li>Web前端在线实战班，不解释</li>
                        <li>这次，带你走上高级UI设计师</li>
                        <li>辣眼睛？这就是博学谷的真相！</li>
                        <li>200元优惠券+免费视频资料</li>
                        <li>学习Python，离高薪梦更进一步愤世嫉俗都</li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 课程类型 -->
        <div class="class_type w">
            <div class="type_title">
                <h3>精品课程</h3>
                <ul>
                    <li>课程推荐</li>
                    <li>JavaEE</li>
                    <li>UI设计</li>
                    <li>前端</li>
                    <li>网络营销</li>
                    <li>大数据</li>
                    <li>Python</li>
                    <li>PHP</li>
                </ul>
            </div>
            <div class="type_content">
                <ul>
                    <li>
                      <img src="../images/wk.jpg" alt="">  
                      <div class="type_text">
                          <p>【前端】Vue.js入门和实战</p>
                          <p>讲师:黑马讲师|18小时</p>
                          <p class="class_price"><span>￥699.00</span> <span>￥899.0</span> <img src="../images/per.png" alt=""><span>149</span></p>
                      </div>
                    </li>
                    <li>
                        <img src="../images/wk.jpg" alt="">  
                        <div class="type_text">
                            <p>【前端】Vue.js入门和实战</p>
                            <p>讲师:黑马讲师|18小时</p>
                            <p class="class_price"><span>￥699.00</span> <span>￥899.0</span> <img src="../images/per.png" alt=""><span>149</span></p>
                        </div>
                      </li>
                      <li>
                        <img src="../images/wk.jpg" alt="">  
                        <div class="type_text">
                            <p>【前端】Vue.js入门和实战</p>
                            <p>讲师:黑马讲师|18小时</p>
                            <p class="class_price"><span>￥699.00</span> <span>￥899.0</span> <img src="../images/per.png" alt=""><span>149</span></p>
                        </div>
                      </li>
                      <li>
                        <img src="../images/wk.jpg" alt="">  
                        <div class="type_text">
                            <p>【前端】Vue.js入门和实战</p>
                            <p>讲师:黑马讲师|18小时</p>
                            <p class="class_price"><span>￥699.00</span> <span>￥899.0</span> <img src="../images/per.png" alt=""><span>149</span></p>
                        </div>
                      </li>
                </ul>
            </div>
           
        </div>
    </div>
    <!-- 底部 -->
    <footer class="footer">
        <div class="w">
            <div class="footer_one">
                <ul>
                    <li>
                       <h3>博学谷云课堂</h3>
                       <p>博学谷云课堂，是传智播客旗下的在线教育品牌。专注整合传智优势教学资源、打造是恶化在线学习并能保证教学结构的优质教学产品，同时
                           打造和运营一整套教育生态软件体系，为用户提供满足自身成长和发展要求的有效服务。
                       </p>
                    </li>
                    <li>
                        <h3>关注我们</h3>
                        <img src="../images/weibo.png" alt="">
                        <img src="../images/weixin.png" alt="">
                    </li>
                    <li>
                        <h3>友情链接</h3>
                        <div>
                            <span>传智播客</span>
                            <span>黑马程序论坛</span>
                            <span>传智播客论坛</span>
                            <span>传智播客公开课</span>
                        </div>
                        <div>
                            <span>传智教材资源下载</span>
                            <span>CSDN</span>
                            <span>黑马程序</span>
                            <span>传智云课</span>
                            <span>博学谷视频库</span>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="footer_two">
                
            </div>
            
        </div>
    </footer>
    


</body>
</html>